<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="bg" @click="close"></div>
    <div class="main">
      <div class="wrap-top font-30-B">升级账号权益</div>
      <div class="wrap-content">
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          全球<span class="font-16-B"> 2000万+ <span class="text-underline" style="width: 58px;"></span></span>红人资源
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          <span class="font-16-B">多维度 <span class="text-underline" style="width: 50px;"></span></span>精准红人搜索
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          专业<span class="font-16-B"> 邮件营销 <span class="text-underline" style="width: 69px;"></span></span>系统
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          解锁红人<span class="font-16-B"> 接单任务<span class="text-underline" style="width: 69px;"></span></span>
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          开拓<span class="font-16-B"> 市场洞察<span class="text-underline" style="width: 69px;"></span></span>
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          营销数据<span class="font-16-B"> 监控<span class="text-underline" style="width: 39px;"></span></span>
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          <span class="font-16-B">Shopify <span class="text-underline" style="width: 67px;"></span></span>分销管理
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          <span class="font-16-B">1V1 <span class="text-underline" style="width: 30px;"></span></span>营销顾问
        </div>
        <div class="content-item font-14">
          <i class="iconfont icon-gou"></i>
          2023年海外营销<span class="font-16-B"> 白皮书<span class="text-underline" style="width: 53px;"></span></span>
        </div>
      </div>
      <div class="wrap-footer flex-between">
        <img src="@/assets/qr-wechat.jpg">
        <div class="footer-tip flex-around flex-column">
          <div class="tip-font font-16">扫描二维码添加顾问</div>
          <img src="@/assets/tip-img.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['close']);

const close = () => {
  emit('close');
}
</script>

<style lang="less" scoped>
.popup {
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .main {
    position: relative;
    z-index: 10;
    width: 560px;
    height: 700px;
    background: url(@/assets/user_equity_bg.png) no-repeat;
    background-size: 100% 100%;
    padding-top: 70px;
    padding-left: 47px;
    padding-bottom: 67px;

    .wrap-top {
      width: 206px;
      height: 39px;
      color: @main-color;
      line-height: 39px;
      letter-spacing: 4px;
      margin-bottom: 26px;
    }

    .wrap-content {
      .content-item {
        height: 22px;
        color: #333;
        line-height: 20px;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 70px;
        }

        i {
          color: @main-color;
          margin-right: 9px;
        }

        &>span {
          position: relative;

          .text-underline {
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 8px;
            background: @main-color;
            border-radius: 1px;
            opacity: .2;
            left: 0;
            bottom: 0;
          }
        }
      }
    }

    .wrap-footer {
      width: 460px;
      height: 148px;
      background: hsla(0, 0%, 100%, .4);
      border-radius: 10px;
      border: 1px solid;
      -o-border-image: linear-gradient(141deg, #fff, hsla(0, 0%, 100%, .63)) 1 1;
      border-image: linear-gradient(141deg, #fff, hsla(0, 0%, 100%, .63)) 1 1;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      padding: 24px 42px 24px 28px;
      display: flex;
      justify-content: space-between;

      &>img {
        width: 90px;
        height: 90px;
        border-radius: 10px;
        margin: 0 5px;
      }

      .footer-tip {
        .tip-font {
          width: 165px;
          height: 22px;
          font-size: 16px;
          font-weight: 400;
          color: #999;
          line-height: 22px;
          letter-spacing: 2px;
        }

        img {
          width: 273px;
        }
      }

    }
  }
}
</style>
